<template>
  <el-drawer v-model="visible" size="50%" draggable align-center>
    <div>

      <div class="input-section">
        <div class="flex gap-4 mb-6">
          <span class="w-40px">序号</span>
          <input v-model="templateName" placeholder="序号"></input>
        </div>
        <textarea v-model="text" placeholder="请输入文本段落" rows="10" cols="30"
                  class="textarea"></textarea>
        <div class="color-picker-section">
          <label for="colorPicker">选择背景颜色:</label>
          <input type="color" v-model="backgroundColor" id="colorPicker"/>
        </div>
        <div class="font-size-section">
          <label for="fontSize">输入字体大小 (px):</label>
          <input type="number" v-model="fontSize" id="fontSize" min="1" placeholder="例如: 18"/> px
        </div>
      </div>
      <div>
        <label>是否启用</label>
        <el-switch v-model="effectFlag" class="ml-2" active-value="1" inactive-value="0"
                   style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
      </div>
      <div class="mt-10px mb-10px">
        <label class="mr-10px">日期</label>
        <el-date-picker value-format="YYYY-MM-DD" v-model="createTime" placeholder="选择日期时间"></el-date-picker>
      </div>
      <el-divider>预览</el-divider>
      <div class="preview" :style="{ backgroundColor: backgroundColor, fontSize: fontSize + 'px' }">
        <p v-html="formattedText"></p>
      </div>

    </div>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="confirm"
                           :loading="confirmLoading">确 定</el-button>
            </span>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import {ElMessage} from "element-plus";
import {ref, onMounted, computed} from 'vue';
import request from '@/config/axios'

const visible = ref(false)

const type = ref('')
const formData = ref({})
const text = ref('');
const templateName = ref('');
const backgroundColor = ref('#ffffff');
const fontSize = ref(18);
const id = ref('')
const effectFlag = ref('')
const createTime = ref('')

const confirmLoading = ref(false)

const emit = defineEmits(["ok"])

const formattedText = computed(() => {
  // 将换行符 \n 替换为 <br>
  return text.value.replace(/\n/g, '<br>');
});

const confirm = async function () {
  confirmLoading.value = true
  try {
    const url = {
      'add': '/answerTemplate/save',
      'bianji': '/answerTemplate/updateById',
    }
    await request.post({
      url: url[type.value],
      data: {
        templateName: templateName.value,
        text: text.value,
        backgroundColor: backgroundColor.value,
        fontSize: fontSize.value,
        id: id.value,
        effectFlag: effectFlag.value,
        createTime: createTime.value,
      }
    })
  } catch (error) {
    throw error;
  } finally {
    confirmLoading.value = false
    visible.value = false
    emit('ok')
    ElMessage.success("保存成功!")
  }
}

defineExpose({
  add: () => {
    type.value = 'add'
    text.value = ''
    backgroundColor.value = ''
    fontSize.value = 18
    visible.value = true
    createTime.value = ''
    templateName.value = ''
    id.value = ''

  },
  bianji: (row) => {
    visible.value = true
    text.value = row.text
    backgroundColor.value = row.backgroundColor
    fontSize.value = row.fontSize
    id.value = row.id
    type.value = 'bianji'
    effectFlag.value = row.effectFlag
    createTime.value = row.createTime
    templateName.value = row.templateName
  },
})

</script>

<style scoped lang="scss">
.config-container {
  font-family: 'Arial', sans-serif;
  max-width: 600px;
  margin: auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

.input-section {
  margin-bottom: 20px;
}

.textarea {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
  resize: none;
}

.color-picker-section,
.font-size-section {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.color-picker-section label,
.font-size-section label {
  margin-right: 10px;
}

.save-button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.save-button:hover {
  background-color: #218838;
}

.preview {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>
